<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="menu">
        <el-button type="success" plain icon="el-icon-edit" @click="addmenus"
          >添加菜单</el-button
        >
      </div>
      <el-table
        :data="menusTree"
        default-expand-all
        :tree-props="{ children: 'childs', hasChildren: 'hasChildren' }"
        row-key="id"
        style="width: 100%"
        class="table"
      >
        <el-table-column prop="title" label="标题" width="250">
          <template slot-scope="{ row }">
            <i v-if="row.pid === null" class="el-icon-folder-opened"></i>
            <i v-else-if="row.is_point === true" class="el-icon-view"></i>
            <i v-else class="el-icon-folder"></i>
            {{ row.title }}
          </template>
        </el-table-column>

        <el-table-column prop="code" width="1200" label="权限点代码">
        </el-table-column>

        <el-table-column label="操作" width="180" class="get" >
          <template slot-scope="{ row }" >
            <div class="get">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="menusEdit(row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delMeuns(row)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加菜单 -->
      <menu-add
        ref="menus"
        @newDataes="onloadTreeList"
        :visible.sync="menusdialogFormVisible"
        text="添加菜单"
        :PermissionGroupsList="PermissionGroupsList"
        :typeStatus.sync='typeStatus'
        @handleCloseModal='menusdialogFormVisible=$event'
      />
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus'
import menuAdd from '../components/menu-add.vue'
// import TreeTable from '../../components/TreeTable'
export default {
  name: 'menus',
  components: { menuAdd },
  data () {
    return {
      menusTree: [], // tree初始数据
      defaultProps: {
        children: ['childs'],
        label: ['title']
      },
      menusdialogFormVisible: false,
      PermissionGroupsList: [], // 权限分组列表
      // row: {}
      typeStatus: false
    }
  },

  created () {
    this.onloadTreeList()
  },

  methods: {
    // 初始menu tree渲染
    async onloadTreeList () {
      const { data } = await list()
      this.menuHandle(data)
      this.menusTree = data
      this.PermissionGroupsList = data
    },
    // 递归处理树形图第三层points转childs数据
    menuHandle (arr) {
      arr.forEach((item) => {
        if (item.childs?.length) {
          this.menuHandle(item.childs)
        } else if (item.points?.length) {
          item.childs = item.points
        }
      })
    },
    // 添加
    addmenus () {
      this.menusdialogFormVisible = true
      this.$refs.menus.handleResetForm()
    },
    // 编辑每一项
    menusEdit (row) {
      console.log(this.$refs.menus)
      this.$refs.menus.hanldeEditForm(row.id)
      this.typeStatus = true
      // console.log(row)
      // this.row = row
      this.menusdialogFormVisible = true
      // console.log(this.$refs.menuForm)
    },
    // 删除
    async delMeuns (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(row)
          this.onloadTreeList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      // await remove(row)
      // this.onloadTreeList()
    },
    onclaer () {
      this.row = {}
    }
  }
}
</script>

<style scoped lang="scss">
.menu {
  display: flex;
  justify-content: end;
}
::v-deep .el-tree-node {
  margin: 10px 0;
}
::v-deep .el-tree-node__expand-icon {
  font-size: 20px;
  color: #000;
}
::v-deep .el-tree-node__expand-icon.expanded {
  transform: rotate(0deg);
}
.points {
  display: inline-block;
  margin-left: 200px;
}
::v-deep .el-table [class*="el-table__row--level"] .el-table__expand-icon {
  display: none;
}
::v-deep .get{
text-align: center;
}
::v-deep .table{
  thead{
    tr{

      th:nth-child(3){

        div{
          text-align: center;
        }
      }
    }
  }
}
</style>
